<template>
  <div>
    <div class="box_bg">
      <ScaleBox class="bg" :width="1024" :height="768" bgc="#00060f" :delay="100" :isFlat="false">
        <div class="main-container chemicalProcess">
          <img @click="goBack" class="back" src="../../../assets/back.png" alt="" />
          <!-- <div @click="goToRecord" class="devicRecord">调控日志</div> -->
          <div class="select">
            <el-select @change="getAttributesBySwtichId" v-model="boxId" placeholder="请选择">
              <el-option v-for="item in switchlist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </div>
          <div class="center_">
            <div class="nav_title">手动控制</div>
          </div>
          <div class="center_">
            <div class="device">
              <div v-for="(item, index) in switchArr" v-loading="item.timeshow" :element-loading-text="'当前命令下发中。。。'" :key="item.id" class="deviceBox">
                <div class="deviceName">{{ item.cname }}</div>
                <div class="deviceStatus">{{ item.realDataConvert }}</div>
                <div v-if="item.switchType == 8" class="status_box">
                  <div @click="openOrCloseSwitch_(item.id, citem.id, index)" v-for="citem in item.customSwitchCmds" :key="citem.id" :class="citem.name == item.realDataConvert ? 'nStatus_img' : 'status_img'">
                    {{ citem.name }}
                  </div>
                </div>
                <div v-if="item.switchType == 3 || item.switchType == 0" class="status_box">
                  <div @click="openOrCloseSwitch_(item.id, indexc, index)" v-for="(citem, indexc) in 2" :key="citem.id" :class="indexc == 0 ? 'nStatus_img' : 'status_img'">
                    {{ indexc == 1 ? '开启' : '关闭' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBox>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import axios from 'axios'

import { getSwitchList, getAttributesBySwtichId } from '@/api/system'
import ScaleBox from 'vue2-scale-box'
import moment from 'moment'
export default {
  components: {
    ScaleBox
  },
  data() {
    return {
      indexc: 0,

      switchlist: [],
      switchArr: [],
      boxId: '',
      timerd: ''
    }
  },
  mounted() {
    this.getSwitchList()
  },
  beforeDestroy() {
    clearInterval(this.timerd)
  },
  methods: {
    openOrCloseSwitch_(attributeId, modelRuleSwitchCmdId, index) {
      let data = {
        id: this.boxId,
        attributeId: attributeId
      }
      if (modelRuleSwitchCmdId == 0 || modelRuleSwitchCmdId == 1) {
        data.swtichStatus = modelRuleSwitchCmdId
      } else {
        data.modelRuleSwitchCmdId = modelRuleSwitchCmdId
      }
      this.timeer(index)
      axios
        .post('https://zhny.bbyiot.com/intelligent_agriculture_webservice/pc/growthModelDecision/openOrCloseSwitch', data, {
          headers: {
            Authorization: window.localStorage.getItem('token_1'),
            'Content-Type': 'application/json'
          }
        })
        .then(res => {
          this.$message({ type: 'success', message: res.data.msg })
          // this.getGrowthModelDecisionSchedules()
          setTimeout(() => {
            this.getAttributesBySwtichId()
          }, 5000)
        })
    },
    timeer(index) {
      this.switchArr[index].timeshow = true
      this.$forceUpdate()
      var that = this
      var time = 1
      let time1 = setInterval(() => {
        if (time == 0) {
          time = 1
          this.switchArr[index].timeshow = false
          clearInterval(time1)
          this.getAttributesBySwtichId()
        } else {
          time = time - 1
        }
      }, 1000)
    },
    getSwitchList() {
      let form = {
        pageNum: 1,
        pageSize: 10,
        code: '',
        type0: 0,
        groupId: 509
      }
      getSwitchList(form).then(res => {
        if (res.code == 200) {
          this.boxId = res.data[0].id
          this.switchlist = res.data
          this.getAttributesBySwtichId()
          this.timerd = setInterval(() => {
            this.getAttributesBySwtichId()
          }, 60000)
        }
      })
    },
    getAttributesBySwtichId() {
      let form = {
        id: this.boxId,
        type0: 0
      }
      getAttributesBySwtichId(form).then(res => {
        if (res.code == 200) {
          this.switchArr = res.data
        }
      })
    },
    goToRecord() {
      this.$router.push({
        path: '/home/recordList'
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    getIndx(val) {
      this.$router.push({
        path: val
      })
    }
  }
}
</script>
<style>
.DateStyle {
  scale: 1.5;
  /* width: 670px;
  height: 580px; */
}
.timerPicer {
  scale: 2;
}
/* .DateStyle .el-picker-panel__content {
  width: 95%;
  height: 500px;
}
.DateStyle .el-date-table {
  height: 100%;
}
.DateStyle .el-date-table td {
  height: 60px;
  font-size: 20px;
}
.DateStyle .el-date-table tr {
  height: 60px;
  font-size: 23px;
}
.timerPicer .el-popper {
  width: 700px;
  height: 400px;
}
.el-time-spinner {
  height: 350px;
}
.el-time-spinner__wrapper {
  max-height: 350px;
}
.el-time-spinner__item {
  height: 40px;
  font-size: 20px;
}
.el-time-panel__content::before {
  top: 27%;
}
.el-time-panel__content::after {
  top: 27%;
} */
</style>
<style lang="less" scoped>
.devicRecord {
  width: 120px;
  height: 40px;
  background: #007eff;
  border-radius: 25px;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 18px;
  line-height: 38px;
  text-align: center;
  color: #ffffff;
  font-family: 'MyCustomFont', sans-serif;
  box-shadow: 2px 2px 5px #000 inset;
}
.device {
  position: absolute;
  top: 133px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: scroll;
  height: 560px;
  .deviceBox {
    margin: 10px;
    width: 466px;
    height: 265px;
    background: #19253a;
    border-radius: 27px;
    position: relative;
    .status_box {
      display: flex;
      justify-content: space-around;
      position: absolute;
      width: 440px;
      left: 15px;
      bottom: 52px;
      .status_img {
        width: 140px;
        height: 92px;
        cursor: pointer;
        background: linear-gradient(90deg, #00a6ff 50%, #006dff 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        border-radius: 15px;
        border: 3px solid #3cecff;
      }
      .nStatus_img {
        width: 140px;
        height: 92px;
        cursor: pointer;
        background: #c9c6c6;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #000000;
        border-radius: 15px;
        border: 3px solid #3a3a3a;
      }
    }
    .deviceName {
      position: absolute;
      top: 26px;
      left: 29px;
      font-weight: 600;

      font-size: 24px;
      color: #f9fafa;
    }
    .deviceStatus {
      position: absolute;
      top: 34px;
      right: 29px;
      font-weight: 600;
      font-size: 24px;
      color: #f53325;
    }
  }
}
.add_icon {
  width: 54px;
  height: 54px;
  background: linear-gradient(180deg, #00a6ff 0%, #006dff 100%);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  line-height: 52px;
  // align-items: center;
  font-size: 40px;
  margin-left: 10px;
}
.between {
  display: flex;
}
.back {
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  top: 30px;
  left: 41px;
}
// /deep/.DateStyle {
//   width: 700px;
// }
// /deep/ .el-date-picker {
//   width: 700px;
// }

/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 0px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #cceaf8; /* 设置滑块的背景颜色 */
  height: 12px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}
/deep/.el-input-group__append {
  background-color: #387dff;
  color: #ffffff;
  cursor: pointer;
}

/deep/ .el-input__inner {
  font-weight: bold;
  color: #fff;
  text-align: center;
  font-style: normal;
  border: none;
  border-radius: 9px;
  background: transparent;
  border-radius: 20px 0 0 20px;
  font-size: 18px;
}
.select {
  position: absolute;
  right: 20px;
  top: 90px;
}
/deep/.el-range-input {
  background: transparent;
}
/deep/.el-range-separator {
  color: #ffffff;
}

.boxs {
  position: absolute;
  top: 115px;
  width: 957px;
  height: 611px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(11.02941176470588px);
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  padding: 40px;
  .content_box {
    min-width: 138px;
    height: 54px;
    background: #2a3549;
    border-radius: 8px;
    font-weight: 500;
    font-size: 24px;
    color: #0569ff;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .record {
    width: 673px;
    height: 146px;
    background: #2a3549;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    .record_box {
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
    }
  }
}
.aic {
  display: flex;
  align-items: center;
  min-height: 80px;
}
.bottom {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-around;
  width: 957px;
}
.bg {
  background: url('../../../assets/bg_.png') no-repeat center center;
  // width: 100vw;
  height: 100vh;
  width: 100vw;
  // background-color: #05032e;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
}
.box_bg {
  background-color: #011e7b !important;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.center_ {
  display: flex;
  justify-content: center;
  .nav_title {
    font-family: 'MyCustomFont', sans-serif;
    display: flex;
    justify-content: center;
    // background: url('../assets/title.png') no-repeat center center;
    position: absolute;
    top: 20px;
    font-size: 42px;
    color: #ffffff;
    line-height: 58px;
    text-align: justify;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #0771ff 97%, #006dff 100%);
    -webkit-background-clip: text;
    color: transparent;

    .nav_t {
      font-weight: bolder;
      font-size: 34px;
      color: #3de6ff;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      background: linear-gradient(90deg, #ffffff 0%, #02c2cb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
@font-face {
  font-family: 'MyCustomFont'; /* 定义字体的名称 */
  src: url('../../../assets/tt.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}
</style>
